<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录</title>
		<link rel="stylesheet" href="css/bootstrap.css">
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
		<script type="text/javascript" src="js/jquery.serializejson.js"></script>
		<script type="text/javascript" src="js/layer.js"></script>
		<style type="text/css">
			body{
				background: url(image/loginbg.jpg) no-repeat;
				background-size: cover;
				background-attachment: fixed;
			}
			.huawei-logo{
				width: 150px;
				height: 150px;
				margin: 0 auto;
				padding-bottom: 20px;
			}
			img{
				width: auto;
				height: auto;
				max-width: 100%;
				max-height: 100%;
			}
			.login-container{
				position: absolute;
				width: 100%;
				top: 50%;
				transform: translateY(-100%);
			}
			.login-text{
				opacity: 0.6;
				border-radius: 50px;
			}
			.login-text:focus{
				opacity: 0.8;
			}
			.login-button{
				width: 100%;
				border-radius: 50px;
			}
			.layui-layer-btn0{
				color: white !important;
			}
		</style>
	</head>
	<body>
		<div class="login-container">
			<div class="container-fluid">
				<div class="huawei-logo">
					<img src="image/huawei.png" alt="">
				</div>
				<div class="row justify-content-center">
					<div class="col-10 col-md-6 col-lg-4 col-xl-3">
						<form onsubmit="return false;" id="loginForm">
							<div class="form-group">
								<input type="text" class="form-control login-text" name="name" placeholder="用户名">
							</div>
							<div class="form-group">
								<input type="password" class="form-control login-text" name="password" placeholder="密码">
							</div>
							<div class="checkbox">
								<label style="color: white;">
									<input type="checkbox" name="remember"> 记住我
								</label>
							</div>
							<button type="submit" class="btn btn-warning login-button" id="loginSubmit">登录</button>
						</form>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		$(document).ready(function(){
			
			//登录
			$("#loginSubmit").click(function(event) {
                let param = $("#loginForm").serializeJSON();
                console.log(param);
                $.ajax({
                    url: 'http://localhost:9090/HuaJu/loginPage/login',
                    type: 'POST',
                    dataType: 'json',
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify(param),
                    success: function (data) {
                        switch (data.code) {
                            case 0: {
                                layer.alert("用户名或密码错误!");
                                break;
                            }
                            case 1: {
                                window.location.href="index.html";
                                break;
                            }
                            case -1: {
                                layer.alert("系统异常!");
                                break;
                            }
                        }
                    }
                });
            })
		})
	</script>
</html>
